<template>
  <div class="interface-management">
    <!-- 动态背景 -->
    <div class="animated-bg">
      <div class="light-beam"></div>
      <div class="particles"></div>
      <div class="cyber-grid"></div>
    </div>

    <!-- 头部区域 -->
    <header class="page-header">
      <h1 class="title">
        <span class="icon"><i class="fas fa-code"></i></span>
        新增接口
      </h1>
      <p class="subtitle">创建高质量的API接口，为开发者提供优质服务</p>
    </header>

    <!-- 主要内容区 -->
    <div class="content-wrapper">
      <!-- 步骤导航 -->
      <div class="steps-nav">
        <div class="progress-bar">
          <div class="progress" :style="{ width: progressWidth + '%' }"></div>
        </div>
        <div 
          v-for="(step, index) in steps" 
          :key="index"
          :class="['step', { 
            'active': currentStep === index,
            'completed': currentStep > index 
          }]"
          @click="jumpToStep(index)"
        >
          <div class="step-icon">
            <i :class="step.icon"></i>
          </div>
          <div class="step-content">
            <div class="step-title">{{ step.title }}</div>
            <div class="step-desc">{{ step.description }}</div>
          </div>
        </div>
      </div>

      <!-- 表单内容区 -->
      <div class="form-container">
        <transition name="fade-slide" mode="out-in">
          <!-- 步骤1: 基本信息 -->
          <div v-if="currentStep === 0" key="basic" class="form-step">
            <div class="form-group">
              <label class="title">接口名称 <span class="required">*</span></label>
              <div class="input-wrapper">
                <el-input 
                  v-model="formData.apiTitle"
                  ref="apiTitle"
                  placeholder="请输入接口名称"
                  :maxlength="20"
                  show-word-limit
                  @input="handleInput('apiTitle')"
                >
                  <template #prefix>
                    <i class="fas fa-tag"></i>
                  </template>
                </el-input>
                <div v-if="validationErrors.apiTitle" class="error-message">
                  <i class="fas fa-exclamation-circle"></i>
                  {{ validationErrors.apiTitle }}
                </div>
              </div>
            </div>

            <div class="form-group">
              <label>接口别名 <span class="required">*</span></label>
              <div class="input-wrapper">
                <el-input 
                  v-model="formData.apiAlias"
                  ref="apiAlias"
                  placeholder="请输入接口别名"
                  :maxlength="15"
                  show-word-limit
                  @input="handleInput('apiAlias')"
                >
                  <template #prefix>
                    <i class="fas fa-signature"></i>
                  </template>
                </el-input>
                <div v-if="validationErrors.apiAlias" class="error-message">
                  <i class="fas fa-exclamation-circle"></i>
                  {{ validationErrors.apiAlias }}
                </div>
              </div>
            </div>

            <div class="form-group">
              <label>接口描述 <span class="required">*</span></label>
              <div class="input-wrapper">
                <el-input
                  ref="apiDescription"
                  type="textarea"
                  v-model="formData.apiDescription"
                  :rows="4"
                  placeholder="详细描述接口的功能和用途"
                  :maxlength="200"
                  show-word-limit
                  @input="handleInput('apiDescription')"
                ></el-input>
                <div v-if="validationErrors.apiDescription" class="error-message">
                  <i class="fas fa-exclamation-circle"></i>
                  {{ validationErrors.apiDescription }}
                </div>
              </div>
            </div>

            <div class="form-group">
              <label>接口作者</label>
              <div class="input-wrapper">
                <el-input 
                  v-model="formData.apiAuthor"
                  placeholder="原创接口可不填"
                >
                  <template #prefix>
                    <i class="fas fa-user"></i>
                  </template>
                </el-input>
              </div>
            </div>

            <div class="form-group">
              <label>接口分类 <span class="required">*</span></label>
              <div class="input-wrapper">
                <el-select 
                  v-model="formData.apiCategory"
                  ref="apiCategory"
                  placeholder="请选择接口分类"
                  class="full-width"
                  @change="handleInput('apiCategory')"
                >
                  <el-option
                    v-for="category in categories"
                    :key="category.value"
                    :label="category.label"
                    :value="category.value"
                  >
                    <i :class="category.icon"></i>
                    <span>{{ category.label }}</span>
                  </el-option>
                </el-select>
                <div v-if="validationErrors.apiCategory" class="error-message">
                  <i class="fas fa-exclamation-circle"></i>
                  {{ validationErrors.apiCategory }}
                </div>
              </div>
            </div>

          
            <!-- 新增是否需要token选项 -->
<div class="form-group">
  <label>是否需要Token <span class="required">*</span></label>
  <div class="input-wrapper">
    <el-radio-group 
      v-model="formData.needToken"
      @change="handleInput('needToken')"
    >
      <el-radio :label="1">需要</el-radio>
      <el-radio :label="0">不需要</el-radio>
    </el-radio-group>
    <div v-if="validationErrors.needToken" class="error-message">
      <i class="fas fa-exclamation-circle"></i>
      {{ validationErrors.needToken }}
    </div>
  </div>
</div>

            <div class="form-group">
              <label>接口图片</label>
              <div class="upload-section">
                <el-upload
                  class="image-uploader"
                  :http-request="uploadImage"
                  :show-file-list="false"
                  :before-upload="beforeUpload"
                >
                  <div class="upload-content" v-if="!formData.imageLink">
                    <i class="el-icon-plus upload-icon"></i>
                    <div class="upload-text">
                      <p>点击或拖拽上传图片</p>
                      <span>支持 jpg、png、gif 格式</span>
                    </div>
                  </div>
                  <img v-else :src="formData.imageLink" class="uploaded-image">
                  <div class="image-actions" v-if="formData.imageLink">
                    <el-button type="text" icon="el-icon-refresh" @click.stop="handleReupload">重新上传</el-button>
                    <el-button type="text" icon="el-icon-delete" @click.stop="handleRemoveImage">删除图片</el-button>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>

          <!-- 步骤2: 调用信息 -->
          <div v-if="currentStep === 1" key="call" class="form-step">
            <div class="form-group">
              <label>接口地址 <span class="required">*</span></label>
              <div class="input-wrapper">
                <el-input 
                  v-model="formData.apiUrl"
                  ref="apiUrl"
                  placeholder="请输入接口完整地址"
                  @input="handleInput('apiUrl')"
                >
                  <template #prefix>
                    <i class="fas fa-link"></i>
                  </template>
                </el-input>
                <div v-if="validationErrors.apiUrl" class="error-message">
                  <i class="fas fa-exclamation-circle"></i>
                  {{ validationErrors.apiUrl }}
                </div>
              </div>
            </div>

            <div class="form-group">
              <label>请求示例 <span class="required">*</span></label>
              <div class="input-wrapper">
                <el-input 
                  v-model="formData.requestExample"
                  ref="requestExample"
                  placeholder="请输入请求示例"
                  @input="handleInput('requestExample')"
                >
                  <template #prefix>
                    <i class="fas fa-code"></i>
                  </template>
                </el-input>
                <div v-if="validationErrors.requestExample" class="error-message">
                  <i class="fas fa-exclamation-circle"></i>
                  {{ validationErrors.requestExample }}
                </div>
              </div>
            </div>

            <div class="form-group">
              <label>请求方法 <span class="required">*</span></label>
              <div class="method-selector">
                <button
                  v-for="method in ['GET', 'POST', 'PUT', 'DELETE']"
                  :key="method"
                  :class="['method-btn', { active: formData.requestMethod === method }]"
                  @click="selectMethod(method)"
                >
                  {{ method }}
                </button>
              </div>
            </div>

            <div class="form-group">
              <label>响应格式 <span class="required">*</span></label>
              <div class="format-selector">
                <button
                  v-for="format in responseFormats"
                  :key="format.value"
                  :class="['format-btn', { active: formData.responseFormat === format.value }]"
                  @click="selectFormat(format.value)"
                >
                  <i :class="format.icon"></i>
                  {{ format.label }}
                </button>
              </div>
            </div>

            <div class="form-group">
              <label>响应示例 <span class="required">*</span></label>
              <div class="input-wrapper">
                <el-input
                  ref="responseExample"
                  type="textarea"
                  v-model="formData.responseExample"
                  :rows="6"
                  placeholder="请输入JSON格式的响应示例"
                  @input="handleInput('responseExample')"
                ></el-input>
                <div v-if="validationErrors.responseExample" class="error-message">
                  <i class="fas fa-exclamation-circle"></i>
                  {{ validationErrors.responseExample }}
                </div>
              </div>
            </div>
          </div>

          <!-- 步骤3: 确认提交 -->
          <div v-if="currentStep === 2" key="submit" class="form-step">
            <div class="preview-section">
              <h3>接口预览</h3>
              <div class="preview-card">
                <div class="preview-header">
                  <h4>{{ formData.apiTitle }}</h4>
                  <span class="preview-alias">{{ formData.apiAlias }}</span>
                </div>
                <div class="preview-body">
                  <div class="preview-item">
                    <label>接口描述</label>
                    <p>{{ formData.apiDescription }}</p>
                  </div>
                  <div class="preview-item">
                    <label>请求地址</label>
                    <div class="code-block">
                      {{ formData.apiUrl }}
                      <button @click="copyText(formData.apiUrl)" class="copy-btn">
                        <i class="fas fa-copy"></i>
                      </button>
                    </div>
                  </div>
                  <div class="preview-item">
                    <label>请求方法</label>
                    <span :class="['method-tag', formData.requestMethod.toLowerCase()]">
                      {{ formData.requestMethod }}
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div class="submit-section">
              <div class="submit-notice">
                <i class="fas fa-exclamation-circle"></i>
                <p>提交前请确认以下内容：</p>
                <ul>
                  <li>接口信息准确完整</li>
                  <li>响应示例格式正确</li>
                  <li>接口可以正常访问</li>
                </ul>
              </div>
              
              <el-checkbox v-model="agreement">
                我已确认以上内容，并同意<a href="#" @click.prevent="showTerms">服务条款</a>
              </el-checkbox>
            </div>
          </div>
        </transition>
      </div>

      <!-- 表单控制按钮 -->
      <div class="form-controls">
        <button 
          v-if="currentStep > 0"
          @click="prevStep"
          class="btn-secondary"
        >
          <i class="fas fa-arrow-left"></i>
          上一步
        </button>
        
        <button 
          v-if="currentStep < steps.length - 1"
          @click="nextStep"
          class="btn-primary"
        >
          下一步
          <i class="fas fa-arrow-right"></i>
        </button>
        
        <button 
          v-else
          @click="submitForm"
          :disabled="!agreement || isSubmitting"
          class="btn-submit"
        >
          <i :class="isSubmitting ? 'fas fa-spinner fa-spin' : 'fas fa-paper-plane'"></i>
          {{ isSubmitting ? '提交中...' : '提交接口' }}
        </button>
      </div>
    </div>

    <!-- 全局提示 -->
    <div class="toast" :class="{ 'show': showToast }">
      {{ toastMessage }}
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'InterfaceManagement',
  data() {
    return {
      currentStep: 0,
      showTip: '',
      imageUploadType: 'upload',
      isSubmitting: false,
      agreement: false,
      showSuccessDialog: false,
      steps: [
        { 
          title: '基本信息',
          description: '填写接口的基本信息',
          icon: 'fas fa-info-circle'
        },
        {
          title: '调用信息',
          description: '设置接口的调用方式',
          icon: 'fas fa-code'
        },
        {
          title: '确认提交',
          description: '预览并提交接口',
          icon: 'fas fa-check-circle'
        }
      ],
      formData: {
        apiTitle: '',
        apiAlias: '',
        apiDescription: '',
        apiAuthor: '',
        apiCategory: '',
        apiUrl: '',
        requestExample: '',
        requestMethod: '',
        responseFormat: '',
        responseExample: '',
        imageLink: '',
        needToken: 0, // 默认不需要token
      },
      categories: [
        { value: 'web', label: 'Web开发', icon: 'fas fa-globe' },
        { value: 'mobile', label: '移动应用', icon: 'fas fa-mobile-alt' },
        { value: 'ai', label: '人工智能', icon: 'fas fa-brain' },
        { value: 'data', label: '数据处理', icon: 'fas fa-database' },
        { value: 'security', label: '安全防护', icon: 'fas fa-shield-alt' }
      ],
      responseFormats: [
        { value: 'JSON', label: 'JSON', icon: 'fas fa-code' },
        { value: 'XML', label: 'XML', icon: 'fas fa-file-code' },
        { value: 'TEXT', label: 'TEXT', icon: 'fas fa-file-alt' }
      ],
      // 表单验证规则
      formRules: {
        apiTitle: [
          { required: true, message: '请输入接口名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        apiAlias: [
          { required: true, message: '请输入接口别名', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9_-]+$/, message: '只能包含字母、数字、下划线和横线', trigger: 'blur' }
        ],
        apiDescription: [
          { required: true, message: '请输入接口描述', trigger: 'blur' },
          { min: 10, max: 200, message: '长度在 10 到 200 个字符', trigger: 'blur' }
        ],
        apiCategory: [
          { required: true, message: '请选择接口分类', trigger: 'change' }
        ],
        apiUrl: [
          { required: true, message: '请输入接口地址', trigger: 'blur' },
          { pattern: /^https?:\/\//, message: '请输入有效的URL地址', trigger: 'blur' }
        ],
        responseExample: [
          { required: true, message: '请输入响应示例', trigger: 'blur' },
          { validator: this.validateJSON, trigger: 'blur' }
        ]
      },
      validationErrors: {}
    }
  },
  computed: {
    progressWidth() {
      return (this.currentStep / (this.steps.length - 1)) * 100
    }
  },
  methods: {
    nextStep() {
      if (this.validateCurrentStep()) {
        this.currentStep++
      }
    },
    prevStep() {
      this.currentStep--
    },
    validateCurrentStep() {
      this.clearErrors(); // 清除之前的错误
      let valid = true;
      
      if (this.currentStep === 0) {
        // 基本信息验证
        if (!this.formData.apiTitle) {
          this.showError('apiTitle', '请输入接口名称');
          valid = false;
        } else if (this.formData.apiTitle.length > 20) {
          this.showError('apiTitle', '接口名称不能超过20个字符');
          valid = false;
        }

        if (!this.formData.apiAlias) {
          this.showError('apiAlias', '请输入接口别名');
          valid = false;
        } else if (!/^[a-zA-Z0-9_-]+$/.test(this.formData.apiAlias)) {
          this.showError('apiAlias', '接口别名只能包含字母、数字、下划线和横线');
          valid = false;
        }

        if (!this.formData.apiDescription) {
          this.showError('apiDescription', '请输入接口描述');
          valid = false;
        }

        if (!this.formData.apiCategory) {
          this.showError('apiCategory', '请选择接口分类');
          valid = false;
        }
      }

      if (this.currentStep === 1) {
        // 调用信息验证
        if (!this.formData.apiUrl) {
          this.showError('apiUrl', '请输入接口地址');
          valid = false;
        } else if (!/^https?:\/\//.test(this.formData.apiUrl)) {
          this.showError('apiUrl', '请输入有效的URL地址');
          valid = false;
        }

        if (!this.formData.requestExample) {
          this.showError('requestExample', '请输入请求示例');
          valid = false;
        }

        if (!this.formData.requestMethod) {
          this.showError('requestMethod', '请选择请求方法');
          valid = false;
        }

        if (!this.formData.responseFormat) {
          this.showError('responseFormat', '请选择响应格式');
          valid = false;
        }

        if (!this.formData.responseExample) {
          this.showError('responseExample', '请输入响应示例');
          valid = false;
        } else {
          try {
            JSON.parse(this.formData.responseExample);
          } catch (e) {
            this.showError('responseExample', '响应示例格式不正确，请输入有效的JSON格式');
            valid = false;
          }
        }
      }

      return valid;
    },
    // JSON格式验证
    validateJSON(rule, value, callback) {
      if (!value) {
        callback(new Error('请输入响应示例'))
        return
      }

      try {
        JSON.parse(value)
        callback()
      } catch (e) {
        callback(new Error('请输入有效的JSON格式'))
      }
    },
    //向接口/api/system/api/findAllCatelogies请求接口分类列表GET请求
    async fetchCategories() {
      const response = await axios.get('/api/system/api/findAllCatelogies')
      this.categories = response.data.data;
      //过滤数据，将id变为valvue,categoryName变为label用来适应下拉框数据结构
      this.categories = this.categories.map(item => ({
        value: item.id,
        label: item.categoryName
      }))
    },
    // 提交表单
    async submitForm() {
      if (!this.validateCurrentStep()) return
      
      this.isSubmitting = true
      try {
        const formData = new FormData()
        for (const key in this.formData) {
          formData.append(key, this.formData[key])
        }

        const response = await axios.post('/api/system/api/submit', this.formData, {
          headers: {
        'Content-Type': 'application/json'
      }
        })

        if (response.data.code === 200) {
          this.$message.success('提交成功')
          this.showSuccessDialog = true
        } else {
          throw new Error(response.data.message || '提交失败')
        }
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.isSubmitting = false
      }
    },
    // 自定义上传方法
    async uploadImage(options) {
      try {
        const formData = new FormData();
        formData.append('file', options.file);
        
        const response = await axios.post('/api/system/images/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });

        if (response.data.code === 200) {
          this.formData.imageLink = response.data.message;
          this.$message.success('图片上传成功');
        } else {
          throw new Error(response.data.message || '上传失败');
        }
      } catch (error) {
        this.$message.error(error.message || '图片上传失败');
        // 调用 el-upload 的失败回调
        options.onError();
      }
    },
    validateJson() {
      try {
        JSON.parse(this.formData.responseExample)
        this.showToastMessage('JSON格式正确')
      } catch (e) {
        this.showToastMessage('JSON格式错误')
      }
    },
    formatJson() {
      try {
        const formatted = JSON.stringify(JSON.parse(this.formData.responseExample), null, 2)
        this.formData.responseExample = formatted
      } catch (e) {
        this.showToastMessage('JSON格式错误，无法格式化')
      }
    },
    showToastMessage(message) {
      this.toastMessage = message
      this.showToast = true
      setTimeout(() => {
        this.showToast = false
      }, 3000)
    },
    copyText(text) {
      navigator.clipboard.writeText(text).then(() => {
        this.showToastMessage('复制成功')
      })
    },
    handleReupload() {
      this.formData.imageLink = '';
    },
    handleRemoveImage() {
      this.$confirm('确定要删除当前图片吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.formData.imageLink = '';
        this.$message.success('图片已删除');
      }).catch(() => {});
    },
    // 显示错误
    showError(field, message) {
      // 添加错误信息
      this.$set(this.validationErrors, field, message);
      
      // 添加抖动动画
      const element = this.$refs[field]?.$el || this.$refs[field];
      if (element) {
        element.classList.add('error-shake');
        element.classList.add('input-error');
        
        // 动画结束后移除类名
        setTimeout(() => {
          element.classList.remove('error-shake');
        }, 600);
      }

      // 显示错误提示
      this.showToastMessage(message);
    },

    // 清除错误
    clearErrors() {
      this.validationErrors = {};
      // 移除所有错误相关的类
      document.querySelectorAll('.input-error').forEach(el => {
        el.classList.remove('input-error');
      });
    },

    // 处理输入变化
    handleInput(field) {
      // 当用户开始输入时，清除该字段的错误
      if (this.validationErrors[field]) {
        this.$delete(this.validationErrors, field);
        const element = this.$refs[field]?.$el || this.$refs[field];
        if (element) {
          element.classList.remove('input-error');
        }
      }
    },
    selectMethod(method) {
      this.formData.requestMethod = method;
      // 添加触觉反馈
      if (window.navigator.vibrate) {
        window.navigator.vibrate(50);
      }
    },
    selectFormat(format) {
      this.formData.responseFormat = format;
      // 添加触觉反馈
      if (window.navigator.vibrate) {
        window.navigator.vibrate(50);
      }
    }
  },
  mounted() {
    this.fetchCategories()
  }
}
</script>

<style scoped>
/* 动态背景 */
.animated-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1f25 0%, #2b3137 100%);
}

.light-beam {
  position: absolute;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, 
    rgba(66, 133, 244, 0.05) 0%,
    rgba(66, 133, 244, 0) 70%);
  animation: rotate 20s linear infinite;
}

.particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, #ffffff 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.1;
}

.cyber-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(66, 133, 244, 0.1) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(66, 133, 244, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.1;
}

/* 页面头部 */
.page-header {
  text-align: center;
  padding: 2rem 0;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.title .icon {
  background: rgba(66, 133, 244, 0.2);
  padding: 1rem;
  border-radius: 12px;
  display: inline-flex;
}

.subtitle {
  font-size: 1.2rem;
  opacity: 0.8;
}

/* 内容区域 */
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  padding: 3rem;
}

/* 步骤导航 */
.steps-nav {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-bottom: 4rem;
  padding: 0 2rem;
}

.progress-bar {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(66, 133, 244, 0.2);
  transform: translateY(-50%);
  z-index: 0;
}

.progress {
  height: 100%;
  background: #4285f4;
  transition: width 0.3s ease;
}

.step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.step-icon {
  width: 3rem;
  height: 3rem;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.step.active .step-icon,
.step.completed .step-icon {
  background: #4285f4;
  border-color: #4285f4;
  color: white;
  transform: scale(1.1);
}

.step-content {
  opacity: 0.7;
  transition: all 0.3s ease;
}

.step.active .step-content {
  opacity: 1;
}

.step-title {
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.step-desc {
  font-size: 0.9rem;
  color: #666;
}

/* 表单样式 */
.form-group {
  margin-bottom: 2.5rem;
}

.form-group label {
  display: block;
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 1rem;
  color: #2c3e50;
}

.input-wrapper {
  position: relative;
}

.el-input input,
.el-textarea textarea {
  border-radius: 12px;
  border: 2px solid #e0e0e0;
  padding: 12px;
  transition: all 0.3s ease;
}

.el-input input:focus,
.el-textarea textarea:focus {
  border-color: #4285f4;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

/* 按钮样式 */
.form-controls {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.btn-primary,
.btn-secondary,
.btn-submit {
  padding: 1rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #4285f4, #3367d6);
  color: white;
}

.btn-submit {
  background: linear-gradient(135deg, #34a853, #2e7d32);
  color: white;
}

.btn-secondary {
  background: #f8f9fa;
  color: #4285f4;
  border: 2px solid #4285f4;
}

.btn-primary:hover,
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 动画效果 */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s ease;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-wrapper {
    padding: 1.5rem;
    margin: 1rem;
  }

  .steps-nav {
    flex-direction: column;
    gap: 1rem;
    padding: 0;
  }

  .progress-bar {
    display: none;
  }

  .step {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
  }

  .form-controls {
    flex-direction: column;
    gap: 1rem;
  }

  .btn-primary,
  .btn-secondary,
  .btn-submit {
    width: 100%;
    justify-content: center;
  }
}

/* 修改图片上传和预览样式 */
.upload-section {
  max-width: 400px; /* 限制最大宽度 */
  margin: 0 auto;
}

.image-uploader {
  border: 2px dashed #dcdfe6;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.uploaded-image {
  width: 100%;
  height: 240px; /* 固定高度 */
  object-fit: cover; /* 保持图片比例 */
  border-radius: 8px;
}

/* 修改请求方法按钮样式 */
.method-selector {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.method-btn {
  padding: 0.8rem 1.5rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  color: #606266;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.method-btn.active {
  background: #4285f4;
  color: white;
  border-color: #4285f4;
  box-shadow: 0 2px 8px rgba(66, 133, 244, 0.2);
}

.method-btn:hover {
  border-color: #4285f4;
  color: #4285f4;
}

.method-btn.active:hover {
  color: white;
}

/* 修改响应格式按钮样式 */
.format-selector {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.format-btn {
  flex: 1;
  padding: 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  color: #606266;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.format-btn i {
  font-size: 1.2rem;
}

.format-btn.active {
  background: #4285f4;
  color: white;
  border-color: #4285f4;
  box-shadow: 0 2px 8px rgba(66, 133, 244, 0.2);
}

.format-btn:hover {
  border-color: #4285f4;
  color: #4285f4;
}

.format-btn.active:hover {
  color: white;
}

/* 添加选中状态的动画效果 */
@keyframes selectPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

.method-btn.active,
.format-btn.active {
  animation: selectPulse 0.3s ease;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .method-selector,
  .format-selector {
    flex-wrap: wrap;
  }

  .method-btn,
  .format-btn {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 120px;
  }

  .upload-section {
    max-width: 100%;
  }

  .uploaded-image {
    height: 200px;
  }
}
</style>